<template>
  <div id="math">
    <el-card class="box-card">
      <div slot="header" class="clearfix" style="display: flex;justify-content: center">
        <span>土方直立壁开挖深度计算</span>
      </div>
      <div align="center">
        <label>`hmax=2*c/(k*r*tan(45°-Φ/2))-q/r`</label><br>
        <label>`其中，hmax -土方最大直壁开挖高度`</label><br>
        <label>`γ - -坑壁土的重度(kN|m^3)`</label><br>
        <label>`Φ - -坑壁土的内摩擦角(°)`</label><br>
        <label>`c - -坑壁土粘聚力(kN|m^2)` </label><br>
        <label>`r安全系数一般取值为1.25`</label><br>
      </div>
      <div style="display:flex;justify-content:space-around;margin-top: 20px">
        <el-tag type="success" size="medium" class="input">坑顶互道上均布荷载</el-tag>
        <el-input size="mini" class="input" v-model="tufangkaiwa.q" placeholder="请输入内容"></el-input>
        <el-tag type="success" size="medium" class="input">坑壁土的重度</el-tag>
        <el-input size="mini" class="input" v-model="tufangkaiwa.r" placeholder="请输入内容"></el-input>
        <el-tag type="success" size="medium" class="input">坑壁土的内摩擦角</el-tag>
        <el-input size="mini" class="input" v-model="tufangkaiwa.j" placeholder="请输入内容"></el-input>
        <el-tag type="success" size="medium" class="input">坑壁土粘聚力</el-tag>
        <el-input size="mini" class="input" v-model="tufangkaiwa.c" placeholder="请输入内容"></el-input>
      </div>
      <div class="bottom">
        <el-button style="width: 300px;" type="danger" @click="deletetufang">重置</el-button>
        <el-button style="width: 300px;" type="primary" @click="tufang">计算</el-button>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix" style="display: flex;justify-content: center">
        <span>挖方安全边坡计算</span>
      </div>
      <div align="center">
        <label>`h=2*c*sinθ*cosΦ/(r*sin^2((θ-Φ)/2)`</label><br>
        <label>`其中，h -土坡允许最大高度`</label><br>
        <label>`γ - -坑壁土的重度(kN|m^3)`</label><br>
        <label>`Φ - -坑壁土的内摩擦角(°)`</label><br>
        <label>`c - -坑壁土粘聚力(kN|m^2)` </label><br>
        <label>`θ - -边坡的坡度角(°)` </label><br>
      </div>
      <div style="display:flex;justify-content:space-around;margin-top: 20px">
        <el-tag type="success" size="medium" class="input">边坡的坡度角</el-tag>
        <el-input size="mini" class="input" v-model="bianbo.q" placeholder="请输入0-90"></el-input>
        <el-tag type="success" size="medium" class="input">坑壁土的重度</el-tag>
        <el-input size="mini" class="input" v-model="bianbo.r" placeholder="请输入"></el-input>
        <el-tag type="success" size="medium" class="input">坑壁土的内摩擦角</el-tag>
        <el-input size="mini" class="input" v-model="bianbo.j" placeholder="请输入"></el-input>
        <el-tag type="success" size="medium" class="input">坑壁土粘聚力</el-tag>
        <el-input size="mini" class="input" v-model="bianbo.c" placeholder="请输入"></el-input>
      </div>
      <div class="bottom">
        <el-button style="width: 300px;" type="danger" @click="deletebianBo">重置</el-button>
        <el-button style="width: 300px;" type="primary" @click="bianBo">计算</el-button>
      </div>
    </el-card>
    <div>
      <el-dialog
        title="计算结果"
        :visible.sync="dialogVisible"
        width="30%">
        <span>
          {{title}}{{tufangkaiwa.h}}m
        </span>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        title="计算结果"
        :visible.sync="dialogVisible1"
        width="30%">
        <span>
          {{title}}{{bianbo.h}}m
        </span>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import mathJax from '@/components/mathJax/index'
import { tufang, bianbo } from '@/api/tufang'
export default {
  name: 'tufang',
  components:{
    mathJax
  },
  data(){
    return{
      title:'',
      dialogVisible:false,
      dialogVisible1:false,
      tufangkaiwa:{
        q:'',
        r:'',
        j:'',
        c:'',
        h:''
      },
      bianbo:{
        q:'',
        r:'',
        j:'',
        c:'',
        h:''
      }
    }
  },

  mounted() {
    // this.formatMath()
  },
  methods: {
    /** 数学公式转换 在渲染列表方法结束之后，直接调用即可*/
    formatMath() {
      let that = this;
      setTimeout(function() {
        that.$nextTick(function() {
          if (MathJax.isMathjaxConfig) {//判断是否初始配置，若无则配置。
            MathJax.initMathjaxConfig();
          }
          MathJax.MathQueue("latexDiv");//传入组件id，让组件被MathJax渲染
        })
      }, 500);
    },
    deletebianBo() {
      this.bianbo = {
        q: '',
        r: '',
        j: '',
        c: '',
        h: ''
      }
    },
    deletetufang() {
      this.tufangkaiwa = {
        q: '',
        r: '',
        j: '',
        c: '',
        h: ''
      }
    },
    tufang() {
      tufang(this.tufangkaiwa).then(res=>{
        if (res){
          this.title = '土方直立壁开挖深度最大为'
          this.tufangkaiwa = res.data
          this.dialogVisible = true
          console.log(res)
        }
      })
    },
    bianBo() {
      bianbo(this.bianbo).then(res=>{
        if (res){
          this.title = '挖方安全边坡最大为'
          this.bianbo=res.data;
          this.dialogVisible1 = true
        }
      })
    }
  }
}
</script>

<style scoped>
.input{
  margin-right: 10px;
  /*width: 700px;*/
}
.box-card {
  /*width: 1000px;*/
  margin-top: 10px;
  border-radius: 30px;
}
.bottom{
  margin-top: 8px;
  display: flex;
  justify-content: center;
}
</style>
